<template>
  <div class="auth-page-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">实名认证</h2>
      <el-button type="default" @click="handleBack">返回</el-button>
    </div>

    <!-- 实名认证卡片 -->
    <el-card class="auth-card">
      <el-form 
        ref="authForm" 
        :model="authForm" 
        label-width="100px" 
        class="auth-form"
        @submit.prevent="handleSubmit"
      >
        <!-- 基础信息行 -->
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name" required>
              <el-input v-model="authForm.name" placeholder="请输入您的姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard" required>
              <el-input v-model="authForm.idCard" placeholder="请输入18位身份证号码" maxlength="18" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone" required>
              <el-input v-model="authForm.phone" placeholder="请输入手机号" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绑定微信" prop="wechat">
              <el-input v-model="authForm.wechat" placeholder="请输入微信昵称或ID" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 证件照片上传 -->
        <el-form-item label="身份证正面照片" prop="idFront" required>
          <el-upload
            class="upload-demo"
            action="#"
            :file-list="idFrontList"
            list-type="picture-card"
            :on-change="handleIdFrontChange"
            :auto-upload="false"
            :limit="1"
          >
            <i class="el-icon-plus" />
            <div class="upload-text">选择文件</div>
          </el-upload>
          <div class="upload-tip">
            请上传清晰的身份证正面照片（包含头像、姓名、身份证号）
          </div>
        </el-form-item>

        <el-form-item label="身份证背面照片" prop="idBack" required>
          <el-upload
            class="upload-demo"
            action="#"
            :file-list="idBackList"
            list-type="picture-card"
            :on-change="handleIdBackChange"
            :auto-upload="false"
            :limit="1"
          >
            <i class="el-icon-plus" />
            <div class="upload-text">选择文件</div>
          </el-upload>
          <div class="upload-tip">
            请上传清晰的身份证背面照片（包含有效期）
          </div>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item class="submit-btn-group">
          <el-button type="primary" @click="handleSubmit">提交认证</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

// 表单数据
const authForm = reactive({
  name: '李华',
  idCard: '231298213617824',
  phone: '231298213617824',
  wechat: 'sfasdf',
  idFront: '',
  idBack: ''
})

// 上传文件列表
const idFrontList = ref<any[]>([])
const idBackList = ref<any[]>([])

// 身份证正面上传变化
const handleIdFrontChange = (file: any) => {
  idFrontList.value = [file]
  authForm.idFront = file.uid // 实际项目中可替换为文件URL/ID
}

// 身份证背面上传变化
const handleIdBackChange = (file: any) => {
  idBackList.value = [file]
  authForm.idBack = file.uid
}

// 返回上一页
const handleBack = () => {
  router.back()
}

// 提交表单
const handleSubmit = async () => {
  // 实际项目中需添加表单验证
  if (!authForm.name || !authForm.idCard || !authForm.phone || !authForm.idFront || !authForm.idBack) {
    ElMessage.warning('请完善所有必填信息')
    return
  }

  try {
    // 模拟接口请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    // ElMessageBox.success('实名认证提交成功，等待审核')
    router.back()
  } catch (error) {
    ElMessage.error('提交失败，请稍后重试')
  }
}
</script>

<style scoped>
.auth-page-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 认证卡片 */
.auth-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border: none;
  background-color: #fff;
}

/* 表单样式 */
.auth-form {
  padding: 20px 0;
}

/* 上传组件 */
:deep(.upload-demo) {
  display: inline-block;
  margin-bottom: 8px;
}

:deep(.el-upload--picture-card) {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  border: 2px dashed #e0e6ed;
  transition: all 0.2s;
}

:deep(.el-upload--picture-card:hover) {
  border-color: #4096ff;
}

.upload-text {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
}

/* 提交按钮组 */
.submit-btn-group {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-button--primary) {
  width: 140px;
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .el-row {
    flex-direction: column;
  }
  .el-col {
    width: 100% !important;
    margin-bottom: 12px;
  }
}
</style>